<template>
    <view class="pices">
        <!-- pages/classify/classify.wxml -->
        <view class="jdheader">
            <view class="jdsearch" @tap="searchgoods">搜索礼品</view>
        </view>
        <view class="classify">
            <!-- 分类导航栏 -->
            <scroll-view class="left-navbar" :scroll-y="true">
                <view
                    :class="currentTab == index ? 'active' : ''"
                    @click="parseEventDynamicCode(index,item.category_name)"
                    :data-id="item.category_id"
                    :id="index"
                    :data-screenId="item.screenId"
                    v-for="(item, index) in screenArray"
                    :key="item.category_id"
                >
                    {{ item.category_name }}
                </view>
            </scroll-view>

            <scroll-view id="right" :scroll-y="true" :scroll-top="scrollTop">
                <!-- 商品展示 -->
                <view class="goods-list">
                    <!-- <view class="goods-title">{{item.title}}</view> -->

                    <view class="goods"   @tap="ToSearchResult(item.product_id)" :id="item.product_id" :data-id="item.product_id" v-for="(item, index) in childrenArray" :key="item.product_id">
                        <image class="img" :src="'http://1.14.101.56:82/'+item.product_picture"></image>

                        <text style="  white-space: nowrap; overflow: hidden; text-overflow: ellipsis    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;;
">{{ item.product_name }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
// pages/classify/classify.js
export default {
    data() {
        return {
            currentTab: 0,
            //对应样式变化
            scrollTop: 0,
            //用作跳转后右侧视图回到顶部
            screenArray: [],
            //左侧导航栏内容
            screenId: '',
            //后台查询需要的字段
            childrenArray: [] //右侧内容
        };
    },
  onLoad:function(){
	  uni.request({
	  	url:"http://1.14.101.56:82/product/getCategory",
		method:"POST",
		success: (res) => {
			// console.log(res)
			let data=res.data
			this.screenArray=data.category,
			console.log(data.category)
			this.parseEventDynamicCode(0,this.screenArray[0].category_id-1)
		}
	  })

  	
  },
    methods: {
		parseEventDynamicCode(index,category_name){
			// console.log(category_name)
			this.currentTab=index
				uni.request({
					url:"/api/product/getPromoProduct",
					method:"POST",
					data:{"categoryName":category_name},
				  success: res => {
					  console.log(res)
				      this.childrenArray=res.data.Product
				  },
				  fail: res => {
				    console.log("查询失败", res)
				  }
				})
		
		},
        searchgoods: function () {
            uni.navigateTo({
                url: '../search/search'
            });
        },
		   ToSearchResult: function (product_id) {
		        uni.navigateTo({
		          url: '../goodsdetail/goodsdetail?id=' +product_id,
		        })
		      },
		    
		   //    navbarTap: function (e) {
		   //      var that = this;
		   //      // console.log(e);
		   //      // console.log(e.currentTarget.dataset.screenid);
		   //      // console.log(e.target.dataset.id);
		   //      // console.log(e.currentTarget.dataset.id);
		   //      var classifyId = e.currentTarget.dataset.id
		   //      uni.request({
					// url:"http://1.14.101.56:82/product/getPromoProduct",
					// method:"POST",
					// data:{"categoryName":this.category_name},
		   //        success: res => {
		   //          that.setData({
		   //            childrenArray: res.data.Product,
		   //          })
		   //        },
		   //        fail: res => {
		   //          console.log("查询失败", res)
		   //        }
		   //      })
		   //      that.setData({
		   //        currentTab: e.currentTarget.id, //按钮CSS变化
		   //        screenId: e.currentTarget.dataset.screenid,
		   //        scrollTop: 0, //切换导航后，控制右侧滚动视图回到顶部
		   //      })
		   //    },

    }
};
</script>
<style>
/* pages/classify/classify.wxss */
.pices{
	height: 100%;
}
.jdheader {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    background:#ef9b9b;
    padding-top: 5px;
  }
  .jdsearch {
    width: 95%;
    height: 42px;
    line-height: 45px;
    border-radius: 35px;
    margin-bottom: 10px;
    background: #fff;
    font-size: 15px;
    color: #ccc;
    font-family: "微软雅黑";
    text-align: center;
  }
  .left-navbar{
    position:absolute;
    left:0;
    width:25%;
    height:90%;
    background-color:#eee;
    font-size:15px;
  }
  .left-navbar view{
    height:80rpx;
    line-height: 80rpx;
    text-align:center;
  }
  .active{
    background-color:#FFF;
    color:#ef9b9b;
    font-size:17px;
  }
  #right{
    position:absolute;
    right:0;
    width:75%;
    height:90%;
  }
  .img-banner{
    height:150rpx;
    width:100%;
  }
  .goods-list{
    display:flex;
    flex-wrap:wrap;
    margin-top:30rpx;
  }
  .goods-title{
    width:100%;
    font-size:15px;
    font-weight:bold;
    padding-left:10rpx;
  }
  .goods{
    width:150rpx;
    font-size:14px;
    margin:15rpx;
    text-align:center;
  }
  .img{
    width:140rpx;
    height:140rpx;
  }
</style>
